var swFlag = 0;
var bigMap;
var arrZones; //circle Zone
var province = {};


$(document).ready(function() 
{
	// initVal();
	initializeMap();

	$.ajax({
		url: "/thesis/assets/js/pages/vn-zone-coordinate.json",
		dataType: "json",
		success: function (data) {
			for(prov in data) {
				k = {};
				k['name'] = data[prov]['name'];
				k['zone'] = data[prov]['zone'];

				k['polygons'] = [];
				coordinates = data[prov].polygons;
				for (coor in coordinates) {
					k['polygons'].push(renderProvince(coordinates[coor]));
				}

				province[prov] = k;
			}

			console.log(province);
		}
	})

	swFlag = 0;
	$('.timeline').on('mousedown touchstart', function() {
		swFlag = 1;
		// console.log(swFlag);
	});

	// timelineInit();
	$.when(timelineInit()).done(function() {
		$('#years-frame').sly('activate', 1000);
		$('#decades-frame').sly('activate', 100);
	});

	swFlag = yearTrigger(swFlag);

	$(window).resize(function() {
		$('.frame').sly('reload');
	});

	$('#main-timeline').mousedown(function(e) { 
		e.preventDefault(); 
	});

});

function timelineInit() {
	// Years Slider Init ===========================================================
	$('#years-frame').sly({
		horizontal: 1,
		itemNav: 'forceCentered',
		activateMiddle: 1, // forceCentered only
		activateOn: 'click',
		smart: 1,
		mouseDragging: 1,
		touchDragging: 1,
		releaseSwing: 1,
		startAt: 1700,
		scrollBar: $('#y-scrollbar'),
		scrollBy: 1,
		speed: 300,
		elasticBounds: 1,
		easing: 'easeOutExpo',
		dragHandle: 1,
		dynamicHandle: 1,
		clickBar: 1,
	});
	for(var i = 0; i < 2013; ++i) {
		$('#years-frame .slidee').append('<li class="year">Năm<br /><span>' + i + '</span></li>');
	}
	$('#years-frame').sly('reload');

	// Decade Slider Init ===========================================================
	$('#decades-frame').sly({
		horizontal: 1,
		itemNav: 'forceCentered',
		activateMiddle: 1, // forceCentered only
		activateOn: 'click',
		smart: 1,
		mouseDragging: 1,
		touchDragging: 1,
		// releaseSwing: 1,
		// startAt: 20,
		scrollBar: $('#d-scrollbar'),
		scrollBy: 1,
		speed: 300,
		elasticBounds: 1,
		easing: 'easeOutExpo',
		dragHandle: 1,
		dynamicHandle: 1,
		clickBar: 1,
	});
	for(var i = 0; i < 2013; ++i) {
		if( i % 10 == 0)
			$('#decades-frame .slidee').append('<li class="year">' + i + '</li>');
	}
	$('#decades-frame').sly('reload');
}

function yearTrigger() {

	$('#years-frame').sly('on','active', function() {
		if(swFlag == 1) {
			var year = $('#years-frame .slidee .active span').html();
			var decade = (year - year % 10) / 10;
			// alert(decade);
			$('#decades-frame').sly('activate', decade);
			swFlag = 0;			
		}

		thisYear = 946;
		for(k in province) {
			for(i in province[k]['polygons']) {
				province[k]['polygons'][i].setMap(null);	
			}
		}

		// if(this.rel['activeItem'] % 2 != 0) 
		if(this.rel['activeItem'] == thisYear) 
		{
			// Active Year Event Function
			// for(k in province) {
			// 	for(i in province[k]['polygons']) {
			// 		province[k]['polygons'][i].setMap(null);	
			// 	}
				
			// }
			for(k in province) {
				for(i in province[k]['polygons']) {
					province[k]['polygons'][i].setMap(bigMap);	
				}
				
			}
			count = Object.keys(province).length;
			// alert(count + " tỉnh/thành");
		}
	});

	$('#decades-frame').sly('on','moveEnd', function() {
		if(swFlag == 1) {
			var year = this.rel['centerItem'] * 10 + 1;
			$('#years-frame').sly('activate', year);
			swFlag = 0;
		}
	});
}

// ==============================================================================================================================
// ====================================MAPS======================================================================================
// ==============================================================================================================================
// ==============================================================================================================================
var myStyle = [
{
	"featureType": "road",
	"stylers": [
		{ "visibility": "off" }
	]
},
{
	"featureType": "water",
	"elementType": "labels",
	"stylers": [
		{ "weight": 0.1 },
		// { "color": "#e1e1e1" }
		{ "color": "#6e6455" }
	]
},{
	"featureType": "administrative",
	"elementType": "geometry",
	"stylers": [
		{ "visibility": "on" },
		{ "weight": 0.8 },
		{ "color": "#bfb49f" }
	]
},{
	"featureType": "administrative",
	"elementType": "labels",
	"stylers": [
		{ "visibility": "on" },
		{ "weight": 0.1 },
		{ "color": "#e1e1e1" }
		// { "color": "#6e6455" }
	]
},{
	"featureType": "landscape.natural",
	"elementType": "geometry.fill",
	"stylers": [
		{ "visibility": "on" },
		{ "color": "#f0ece6" }
	]
},{
	"featureType": "poi",
	"stylers": [
		{ "visibility": "off" }
	]
},{
	"featureType": "transit",
	"stylers": [
		{ "visibility": "off" }
	]
}
];

function initializeMap() {
	var mapOptions = {
		mapTypeControlOptions: {
			mapTypeIds: ['mystyle', google.maps.MapTypeId.TERRAIN]
		},
		mapTypeId: 'mystyle',
		center: { lat: 15.961329, lng: 106.259766},
		disableDoubleClickZoom: true,
		zoom: 5
	};
	
	bigMap = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
	bigMap.mapTypes.set('mystyle',new google.maps.StyledMapType(myStyle,{ name:'My Style'}));

	vnZones = [];
	// for(var zone in arrZones) 
	// {
	// 	tar = new google.maps.LatLng(arrZones[zone].latlng[0], arrZones[zone].latlng[1]);
	// 	// console.log(tar);
	// 	var articleZoneOption = {
	// 		strokeColor: '#446CB3',
	// 		strokeOpacity: 0.6,
	// 		strokeWeight: 1,
	// 		fillColor: '#446CB3',
	// 		fillOpacity: 0.4,
	// 		draggable:true,
	// 		map: bigMap,
	// 		center: tar,
	// 		radius: 50000
	// 	};
	//     // Add the circle for this city to the map.
	//     cityCircle = new google.maps.Circle(articleZoneOption);
	//     vnZones.push(cityCircle);

	//     google.maps.event.addListener(cityCircle, 'click', function() {
	//     	console.clear();
	//     	xx = [];
	//     	var str = '[';
	//     	for(i = 0; i < vnZones.length; i++) {
	//     		lat = Math.round(vnZones[i].center['k'] * 1000000) / 1000000;
	//     		lng = Math.round(vnZones[i].center['B'] * 1000000) / 1000000;
	//     		str += '{"index": ' + i + ',' +
	//     		'"latlng": [' + lat + ',' + lng + ']},'
	//     	}
	//     	str = str.substring(0, str.length - 1);
	//     	str += ']';
	//     	console.log(str);
	//     	// console.log(this.center);

	//     });
	// }

}

function renderProvince(str) {
	arr = str.split(" ");
	latlng = [];
	for(i in arr) {
		r = arr[i].split(",");
		latlng.push(new google.maps.LatLng(r[1], r[0]));
	}
	// console.log(latlng);
	land = new google.maps.Polygon({
	    path: latlng,
	    // geodesic: true,
	    strokeColor: '#FF9900',
	    strokeOpacity: 0.7,
	    strokeWeight: 1,
	    fillColor: '#FF9900',
	    fillOpacity: 0.35
	});
	return land;
	// land.setMap(bigMap);
}

// function initVal() {
// 	arrZones = [
// 		{"index": 0,"latlng": [22.390743,102.590341]},{"index": 1,"latlng": [22.492349,103.497279]},
// 		{"index": 2,"latlng": [22.588803,104.385046]},{"index": 3,"latlng": [22.995379,105.146793]},
// 		{"index": 4,"latlng": [22.785916,105.879943]},{"index": 5,"latlng": [22.522127,106.600251]},
// 		{"index": 6,"latlng": [21.723401,106.814517]},{"index": 7,"latlng": [21.524636,107.644151]},
// 		{"index": 8,"latlng": [21.033141,107.171463]},{"index": 9,"latlng": [21.830581,103.074276]},
// 		{"index": 10,"latlng": [21.909983,103.917603]},{"index": 11,"latlng": [22.288251,105.177323]},
// 		{"index": 12,"latlng": [21.821096,104.684943]},{"index": 13,"latlng": [22.083194,106.016076]},
// 		{"index": 14,"latlng": [21.237754,103.294692]},{"index": 15,"latlng": [21.555609,105.500808]},
// 		{"index": 16,"latlng": [21.318898,106.312761]},{"index": 17,"latlng": [20.65116,106.6333]},
// 		{"index": 18,"latlng": [20.837817,105.777737]},{"index": 19,"latlng": [20.158534,106.09565]},
// 		{"index": 20,"latlng": [21.267732,104.074429]},{"index": 21,"latlng": [21.117272,104.898324]},
// 		{"index": 22,"latlng": [20.621493,103.676717]},{"index": 23,"latlng": [20.621984,104.459989]},
// 		{"index": 24,"latlng": [20.446524,105.249794]},{"index": 25,"latlng": [20.055684,104.863072]},
// 		{"index": 26,"latlng": [19.725342,105.545609]},{"index": 27,"latlng": [19.394078,104.315227]},
// 		{"index": 28,"latlng": [19.207546,104.908399]},{"index": 29,"latlng": [18.989442,105.567554]},
// 		{"index": 30,"latlng": [18.48015,105.117437]},{"index": 31,"latlng": [18.249564,105.832704]},
// 		{"index": 32,"latlng": [17.809411,106.173601]},{"index": 33,"latlng": [17.262898,106.534974]},
// 		{"index": 34,"latlng": [16.696297,106.974307]},{"index": 35,"latlng": [16.319479,107.549327]},
// 		{"index": 36,"latlng": [15.643021,107.521337]},{"index": 37,"latlng": [15.935545,108.162797]},
// 		{"index": 38,"latlng": [14.962782,107.870274]},{"index": 39,"latlng": [15.470785,108.360876]},
// 		{"index": 40,"latlng": [14.902321,108.708993]},{"index": 41,"latlng": [14.198827,109.031905]},
// 		{"index": 42,"latlng": [14.279414,108.33538]},{"index": 43,"latlng": [14.276313,107.656355]},
// 		{"index": 44,"latlng": [13.640141,107.709611]},{"index": 45,"latlng": [13.576058,109.133735]},
// 		{"index": 46,"latlng": [13.570248,108.402988]},{"index": 47,"latlng": [12.836168,109.459528]},
// 		{"index": 48,"latlng": [12.906951,108.707834]},{"index": 49,"latlng": [12.969507,107.876658]},
// 		{"index": 50,"latlng": [12.182608,109.143066]},{"index": 51,"latlng": [12.321168,108.342974]},
// 		{"index": 52,"latlng": [12.205546,107.699333]},{"index": 53,"latlng": [11.646107,108.744225]},
// 		{"index": 54,"latlng": [11.959204,106.994721]},{"index": 55,"latlng": [11.562361,108.093328]},
// 		{"index": 56,"latlng": [11.468494,107.449713]},{"index": 57,"latlng": [10.927624,108.363364]},
// 		{"index": 58,"latlng": [10.785219,107.71395]},{"index": 59,"latlng": [11.574229,106.354481]},
// 		{"index": 60,"latlng": [11.081439,106.879864]},{"index": 61,"latlng": [10.995366,106.017309]},
// 		{"index": 62,"latlng": [10.456206,107.024848]},{"index": 63,"latlng": [10.476189,106.272005]},
// 		{"index": 64,"latlng": [10.615709,105.399833]},{"index": 65,"latlng": [9.864079,106.642988]},
// 		{"index": 66,"latlng": [10.022003,105.017824]},{"index": 67,"latlng": [9.945404,105.83971]},
// 		{"index": 68,"latlng": [9.292741,106.050564]},{"index": 69,"latlng": [9.397526,105.245772]},
// 		{"index": 70,"latlng": [8.818954,104.989175]},{"index": 71,"latlng": [10.568419,104.58179]}
// 	];
// }